<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城 </title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./jianbian.css">
    <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class=" container">
            <div class="topbar">
                <div class="menu-container">
                    <div class="topbar-nav">
                        <a rel="nofollow" href="" class="hover_white">官网</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="" class="hover_white">商城</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="" target="_blank" class="hover_white">MIUI</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="" target="_blank" class="hover_white">IoT</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="" target="_blank" class="hover_white">云服务</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="" target="_blank" class="hover_white">天星数科</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="" target="_blank" class="hover_white">有品</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="" target="_blank" class="hover_white">小爱开放平台</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="" target="_blank" class="hover_white">企业团购</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="" target="_blank" class="hover_white">资质证照</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="" target="_blank" class="hover_white">协议规则</a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="" target="_blank" class="topbar-download active hover_white">
                            <span class="appcode">
                                <div class="sj"></div>
                                <img src="./img/小米app.png" width="90" height="90">
                                <div class="text">小米商城APP</div>
                            </span>
                        </a>
                        <span class="sep">|</span>
                        <a rel="nofollow" href="javascript:;" class="J_siteGlobalRegion hover_white">Select Location</a>
                    </div>
 
                    <div class="topbar-cart">
                        <a class="cart-mini" href=""><i class="fa fa-shopping-cart" aria-hidden="true"
                                style="font-size:20px ;"></i>
                            <em class="iconfont-cart-full hide"></em>购物车(0)<span class="cart-mini-num J_cartNum"></span>
                        </a>
 
                        <div class="cart-menu " id="J_miniCartMenu">
                            <div class="menu-content">
                                购物车中还没有商品，赶紧选购吧!
                            </div>
                        </div>
                    </div>
 
                    <div class="topbar-info" id="J_siteUserInfo">
                        <a class="link hover_white" href="">登录</a>
                        <span class="sep">|</span>
                        <a class="link  hover_white " href="">注册</a>
                        <span class="sep">|</span>
                        <span class=" message">
                            <a href="" class="J_needAgreement  hover_white">
                                消息通知
                            </a>
                        </span>
                    </div>
                </div>
            </div>
 
 
 
 
 
 
            <div class="bottombar">
                <div class=" bottombar-container">
                    <div class="logo-container">
                        <a href="" style="display: block;">
                            <img src="./img-blog..jpeg" alt="" class="logo">
                        </a>
                    </div>
                    <div class="header-nav">
                        <ul class="nav-list">
                            <li class="nav-item">
                                <div>
                                    <a href="">Xiaomi手机</a>
                                </div>
                                <div class="item-child">
                                    <a href=""><img src="图片" alt="" style="height: 270px;"></a>
                                </div>
                            </li>
                            <li class="nav-item">
                                <div>
                                    <a href="">Redmi红米</a>
                                </div>
                                <div class="item-child">
                                    <a href="" style="position: relative; left: -100px;"><img src="图片"
                                            alt="" style="height: 270px;"></a>
                                </div>
                            </li>
                            <li class="nav-item1">
                                <div>
                                    <a href="">电视</a>
                                </div>
                                <div class="item-child">
                                    <a href="" style="position: relative; left: -200px;"><img src="./电视.jpeg" alt=""
                                            style="height: 270px;"></a>
                                </div>
                            </li>
                            <li class="nav-item">
                                <div>
                                    <a href="">笔记本</a>
                                </div>
                                <div class="item-child">
                                    <a href="" style="position: relative; left: -300px;"><img src="./img/笔记本.png" alt=""
                                            style="height: 270px;"></a>
                                </div>
                            </li>
                            <li class="nav-item1">
                                <div>
                                    <a href="">平板</a>
                                </div>
                                <div class="item-child">
                                    <a href="" style="position: relative; left: -300px;"><img src="./img/平板.png" alt=""
                                            style="height: 270px;"></a>
                                </div>
                            </li>
                            <li class="nav-item1">
                                <div>
                                    <a href="">家电</a>
                                </div>
                                <div class="item-child">
                                    <a href="" style="position: relative; left: -550px;"><img src="./img/家电.png" alt=""
                                            style="height: 270px;"></a>
                                </div>
                            </li>
                            <li class="nav-item">
                                <div>
                                    <a href="">路由器</a>
                                </div>
                                <div class="item-child">
                                    <a href="" style="position: relative; left:-580px;"><img src="./img/路由器.png" alt=""
                                            style="height: 270px;"></a>
                                </div>
                            </li>
                            <li class="nav-item">
                                <div>
                                    <a href="">服务中心</a>
                                </div>
                            </li>
                            <li class="nav-item1">
                                <div>
                                    <a href="">社区</a>
                                </div>
                            </li>
                            <li>
                                <input type="text" class="input">
                                <button type="" class="bt"><i class="fa fa-search " aria-hidden="true"></i></button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
 
 
            <div class="third">
                <div class="left-list-container">
                    <ul class="left-list">
                        <li class="le">
                            <a href="">
                                手机
                                <i class="fa fa-angle-right icon" aria-hidden="true"></i>
                            </a>
                        </li>
 
                        <li class="le">
                            <a href="">
                                电视
                                <i class="fa fa-angle-right icon" aria-hidden="true"></i>
                            </a>
                        </li>
 
                        <li class="le">
                            <a href="">
                                笔记本&nbsp;平板
                                <i class="fa fa-angle-right icon" aria-hidden="true"></i>
                            </a>
                        </li>
 
                        <li class="le">
                            <a href="">
                                出行&nbsp;穿戴
                                <i class="fa fa-angle-right icon" aria-hidden="true"></i>
                            </a>
                        </li>
 
                        <li class="le">
                            <a href="">
                                耳机&nbsp;音箱
                                <i class="fa fa-angle-right icon" aria-hidden="true"></i>
                            </a>
                        </li>
 
                        <li class="le">
                            <a href="">
                                家电
                                <i class="fa fa-angle-right icon" aria-hidden="true"></i>
                            </a>
                        </li>
 
                        <li class="le">
                            <a href="">
                                智能&nbsp;路由器
                                <i class="fa fa-angle-right icon" aria-hidden="true"></i>
                            </a>
                        </li>
 
                        <li class="le">
                            <a href="">
                                电源&nbsp;配件
                                <i class="fa fa-angle-right icon" aria-hidden="true"></i>
                            </a>
                        </li>
 
                        <li class="le">
                            <a href="">
                                健康&nbsp;儿童
                                <i class="fa fa-angle-right icon" aria-hidden="true"></i>
                            </a>
                        </li>
 
                        <li class="le">
                            <a href="">
                                生活&nbsp;箱包
                                <i class="fa fa-angle-right icon" aria-hidden="true"></i>
                            </a>
                        </li>
 
                    </ul>
                </div>
 
                <div class="right-photo">
                    <a href=""><img src="./img/右侧.png" alt=""></a>
                </div>
            </div>
 
 
 
 
 
            <div class="bottom-container">
                <div class="bottom-1">
                    <ul>
 
                        <li>
                            <div class="top">
                            </div>
                            <div class="top">
                            </div>
                            <div class="top" style="float:right ; position: relative; top:-6px">
                            </div>
                        </li>
 
                        <li >
                            <a href="">
                                <div  class="bottom-1-container" >
                                <div class="botton-1-icon">
                                    <i class="fa fa-clock-o" aria-hidden="true" style="font-size: 30px;"></i>
                                </div>
                                <div class="bottom-1-text">
                                    保障服务
                                </div>
                            </div></a>
                            
 
                            <div class="sp "></div>
 
                            <a href="">
                                <div  class="bottom-1-container" >
                                <div class="botton-1-icon">
                                    <i class="fa fa-black-tie" aria-hidden="true" style="font-size: 30px;"></i>
                                </div>
                                <div class="bottom-1-text">
                                    企业团购
                                </div>
                            </div></a>
                            
 
                            <div class="sp "></div>
                            <a href="">
                                <div  class="bottom-1-container"  style="position: relative; top:-5px">
                                <div class="botton-1-icon">
                                    <i class="fa fa-share-alt-square" aria-hidden="true" style="font-size: 30px;"></i>
                                </div>
                                <div class="bottom-1-text">
                                    F码通道
                                </div>
                            </div></a>
                            
                        </li>
 
 
                        <li>
                            <div class="middle">
                            </div>
                            <div class="middle">
                            </div>
                            <div class="middle" style="float:right ;">
                            </div>
                        </li>
 
                        <li >
                            <a href="">
                                 <div  class="bottom-1-container" >
                                <div class="botton-1-icon">
                                    <i class="fa fa-viadeo" aria-hidden="true" style="font-size: 30px;"></i>
                                </div>
                                <div class="bottom-1-text">
                                    米粉卡
                                </div>
                            </div></a>
                           
 
                            <div class="sp "></div>
 
                            <a href=""><div  class="bottom-1-container" >
                                <div class="botton-1-icon">
                                    <i class="fa fa-slideshare" aria-hidden="true" style="font-size: 30px;"></i>
                                </div>
                                <div class="bottom-1-text">
                                    以旧换新
                                </div>
                            </div></a>
                            
 
                            <div class="sp "></div>
                            <a href="">
                                <div  class="bottom-1-container"  style="position: relative; top:-2px">
                                <div class="botton-1-icon">
                                    <i class="fa fa-lastfm-square" aria-hidden="true" style="font-size: 30px;"></i>
                                </div>
                                <div class="bottom-1-text">
                                    话费充值
                                </div>
                            </div></a>
                            
 
                        </li>
                        <li>
                            <div class="last">
                            </div>
                            <div class="last">
                            </div>
                            <div class="last" style="float:right ; position: relative; top:-14px">
                            </div>
                        </li>
 
                    </ul>
                </div>
                    <div class="bottom-2">
                        <a href=""><img src="./电视.jpeg" alt=""></a>
                    </div>
                    <div class="bottom-2">
                        <a href=""><img src="./手机.jpeg" alt=""></a>
                    </div>
                    <div class="bottom-2">
                        <a href=""> <img src="./图片.jpg" alt=""></a>
                    </div>
            </div>
 
 
 
 
 
 
    </div>
</body>
</html>